<script setup lang="ts">
import {useIndexStore, useUserStore} from "~/store";
import {Search} from "@element-plus/icons-vue";
import PcDialogAdd from "~/Components/pc/main/pc-dialog-add.vue";

const indexStore = useIndexStore()
const handleSelect = (key: string) => {
  console.log(key)
}

const open_search = () => {
  indexStore.search_page = true
}
</script>

<template>
  <el-input
      v-model.trim="indexStore.search"
      style="width: 150px;height: 30px"
      placeholder="搜索"
      :prefix-icon="Search"
      @focus="open_search"
  />
  <el-dropdown
      trigger="click"
      @command="handleSelect"
      :teleported="true"
  >
    <el-button @click="indexStore.close_search" style="height: 30px" class="ml-2">+</el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>
          <pc-dialog-add/>
        </el-dropdown-item>
        <el-dropdown-item>发起群聊</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped>

</style>